import React, { Component, lazy, Suspense } from 'react';
import { HashRouter as Router, Redirect, Route } from "react-router-dom";

import { connect } from "react-redux";
import { initCityAsync } from "./store/actionCreator";
import Home from "./pages/home";
import MapFound from "./pages/mapFound";
import AuthRoute from "./demo/AuthRoute";
// import Children from "./demo/Children";
// import Children2 from "./demo/Children2";
// import HKContext from "./demo/HKContext";
// import CityList from "./pages/citylist";
import HOCA from "./demo/HOCA";
// 即将使用路由懒加载的方式 
const CityList = lazy(() => import("./pages/citylist"));

const Loading = () => <div style={{ position: "fixed", left: 0, top: 0, width: "100vw", height: "100vh", backgroundColor: "red" }} ></div>

const mapStateToProps = (state) => {
  return {
    cityName: state.cityReducer.cityName
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    initCity() {
      dispatch(initCityAsync());
    }
  }
}


@connect(mapStateToProps, mapDispatchToProps)
class App extends Component {
  componentDidMount() {
    this.props.initCity();
  }
  render123() {
    return (
      <div>
        {this.props.cityName && <Router>
          {/* 编辑其他页面的时候 刷新时候 保留在当前的页面 */}
          <Suspense fallback={<Loading />} >
            <Route exact path="/" >
              <Redirect exact to="/home/index" />
            </Route>
            <Route path="/home" component={Home} />
            <Route exact path="/citylist" component={CityList} />
            <Route exact path="/mapfound" component={MapFound} />
          </Suspense>
          {/* <Redirect exact path="/" to="/home/index" /> */}
        </Router>}

      </div>
    );
  }
  render() {
    return <div>
      <HOCA/>

    </div>
  }
}

// export default connect(mapStateToProps, mapDispatchToProps)(App);
export default App;